<script>
import {addBanner} from "@/api/banner"
import { ElMessage } from 'element-plus'
export default {

    data(){
        return{
            //在页面显示文件
            imageUrl:'',
            //上传文件数据
            formData:{
                link:'',
                alt:'',
                img:''
            }
        }
    },
    methods: {
        changeClick(){
            //手动调用input的点击事件
            this.$refs.inpRef.click()
        },

        //选择图片之后的回调函数
        changeImg(e){
            const file=e.target.files[0]
            //将选择图片显示在页面中通常使用两种方法
            //1、使用图片创建一个临时的 URL 地址，创建方法为 URL.createObjectURL
            // this.imageUrl=URL.createObjectURL(file)
            // console.log(this.imageUrl);

            //2、将图片转换成 base64 数据流的方式来显示 
            //创建一个文件的加载器 reader
            let reader=new FileReader()
            //将文件读取成 base64 的格式
            reader.readAsDataURL(file)
            reader.onload=()=>{
                this.imageUrl=reader.result
                this.formData.img=reader.result
            }
        },
        submitFile(){
            //将轮播图数据提交到服务器
            addBanner(this.formData).then(res=>{;
                if(res.code==200){
                    ElMessage.success(res.message)
                    this.formData={
                        link:'',
                        alt:'',
                        img:''
                    }
                    this.imageUrl=''
                    this.$router.push('/banner/bannerList')
                }else{
                    ElMessage.error(res.message)
                }
            })
            /* 
                公司中上传图片通常有两种方法
                1、将图片上传到专门放文件(图片)的服务器中，会返回一个图片的url地址，拿到地址后将地址发送给自己的服务器进行保留
                2、直接将图片转换成 base64 放到服务器中(弊端：文件太大，影响服务器存储空间)
            */ 
        }
    },

}
</script>
<template>
    <h4>添加轮播图</h4>
    <div>
        <el-input v-model="formData.alt" placeholder="请输入alt"></el-input>
        <el-input v-model="formData.link" placeholder="请输入link"></el-input>
        <el-button @click="changeClick">选择文件</el-button>
        <input @change="changeImg" ref="inpRef"hidden type="file">
    </div>
    <el-image :style="{height:'100px'}" :src="imageUrl"></el-image>
    <br>
    <el-button @click="submitFile">上传</el-button>
</template>